<template>
	<div id="admin" class="row mt-3">
		<keep-alive>
			<new-pizza></new-pizza>
		</keep-alive>
		<div class="col-sm-12 col-md-4">
			<div class="card">
				<div class="card-header">
					菜单列表{{ $route.params}}
				</div>
				<div class="card-body">
					<table class="table table-bordered">
						<thead>
							<tr class="table-default">
								<th>品名</th>
								<th>删除</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for ="item in pizzadata">
								<td class="col-md-8">{{item.name}}</td>
								<td class="col-md-4">
									<button 
									    @click = "deletePizza(item)"
									    class="mx-2 btn btn-sm btn-outline-danger">&times;
								    </button>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import newPizza from './newPizza.vue'
export default{
	data(){
		return {
			// pizzadata:{}
		}
	},
	computed:{
		// 从vuex中拿数据
		pizzadata(){
			return this.$store.state.pizzadata;
		}
	},
	methods:{
		deletePizza(item){
			this.$http.post('https://d.apicloud.com/mcm/api/pizzaMenu/'+item.id,{'_method':'DELETE'})
			.then((res) => {
				console.log('delete successful');
			})
			this.$store.commit('removePizza',item);
		}
	},
	components:{
		newPizza,
	},
	

};
</script>
<style type="text/css">
	
</style>